﻿@page "/diagram/symmetric-layout"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes a simple network template using a symmetrical layout algorithm.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>This view is well suited for large networks and is commonly used in network component diagrams. 
      It is typically used with simple straight line links. This example shows how to arrange nodes in a symmetrical structure. 
      The <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/layout/symmetric-layout/'>Layout</a> property of the Diagram can be used to enable it.</p><br>
</ActionDescription>

@*Hidden:Lines*@
<style>
    .row {
        display: block;
    }

    #diagram {
        display: block;
    }
    .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
        background: #fff;
        color: #495057;
        width: 150px;
    }
</style>
@*End:Hidden*@

@*Hidden:Lines*@
<div class="col-lg-9 control-section sb-property-border">
    @*End:Hidden*@
    <div id="diagram-space" class="content-wrapper">
        <SfDiagram ModelType="@model" ID="diagram" Height="550px" Layout="@LayoutValue" Tool="@DiagramTools.ZoomPan" ConnectorDefaults="@ConnectorDefault" NodeDefaults="@NodeDefaults">
            <DiagramDataSource Id="Id" ParentId="Source" DataSource="@DataSource">
                <DiagramDataMapSettings>
                    <DiagramDataMapSetting Property="shape.type" Field="Shape"></DiagramDataMapSetting>
                </DiagramDataMapSettings>
            </DiagramDataSource>
            <DiagramTemplates>
                <NodeTemplate>
                    @{
                        if ((context as Node).Data.Type == "server")
                        {
                            <svg style="transform: translate(-8px, -2.5px)">
                                <g xmlns="http://www.w3.org/2000/svg" style="transform: translate(-8px, -2.5px)">
                                    <polygon fill="#DBD5DA"
                                             points="37.3,7.3 19.4,17.8 9.8,12.1 9.2,12.9 19,18.7 19,49 20,49 20,18.5 37.8,8.1"></polygon>
                                    <polygon fill="#E5DCE1" points="36.3,7.8 28.2,2.6 10.5,12.5 19.5,17.8"></polygon>
                                    <polygon fill="#BBB5B9" points="20,18.5 37,8.6 36.9,38.4 20,47.9"></polygon>
                                    <polygon fill="#DBD2D7" points="10,13.4 19,18.7 19,48.2 10,42.7"></polygon>
                                    <path fill="#656666"
                                          d="M19.2,49.1c-0.5,0-0.9-0.1-1.3-0.4L10.2,44C9.4,43.5,9,42.7,9,41.8V13.6c0-0.9,0.5-1.7,1.3-2.2l16.7-9.2c0.8-0.4,1.8-0.4,2.5,0.1L36.8,7C37.6,7.5,38,8.2,38,9.1l-0.1,28.4c0,0.9-0.5,1.7-1.3,2.2l-16.2,9.1C20.1,49,19.6,49.1,19.2,49.1z M28.1,2.9c-0.3,0-0.5,0.1-0.7,0.2l-16.6,9.2c-0.5,0.3-0.8,0.8-0.8,1.3v28.2c0,0.5,0.3,1,0.7,1.3l7.7,4.8c0.5,0.3,1.1,0.3,1.5,0l16.2-9.1c0.5-0.3,0.8-0.8,0.8-1.3L37,9.1c0-0.5-0.3-1-0.7-1.3L29,3.2C28.7,3,28.4,2.9,28.1,2.9z">
                                    </path>
                                    <ellipse fill="#656666" cx="14.3" cy="40.2" rx="0.6" ry="1.1"></ellipse>
                                    <polygon fill="#656666" points="10.9,22.6 10.9,22.6 10.9,22.6"></polygon>
                                    <polygon fill="#656666" class="st4ed" points="11.9,22 11.9,23.2 16.7,26 16.7,24.9 "></polygon>
                                    <polygon fill="#656666" points="10.9,18.9 10.9,18.9 10.9,18.9"></polygon>
                                    <polygon fill="#656666" points="11.9,18.4 11.9,19.5 16.7,22.4 16.7,21.2"></polygon>
                                </g>

                            </svg>
                        }

                    }
                </NodeTemplate>
            </DiagramTemplates>
            <DiagramSnapSettings Constraints="@SnapConstraints.None"></DiagramSnapSettings>
            <DiagramPageSettings>
                <DiagramFitOptions CanFit="true" Mode="FitModes.Width"></DiagramFitOptions>
            </DiagramPageSettings>
        </SfDiagram>

    </div>
    @*Hidden:Lines*@
</div>
<div class="col-lg-3 property-section" style="float:left;">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties">
                <tbody>
                    <tr>
                        <td style="width:30%;"> Spring Length </td>
                        <td style="width: 60%">
                            <SfNumericTextBox @ref="@SpringLength" ID="SpringLength" TValue="int" Format="###.##" Step="1" Value="80">
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:10%;padding-top:10px"> </td>
                        <td style="width:10%;padding-top:10px"> </td>
                    </tr>
                    <tr>
                        <td style="width:30%;">Spring Factor</td>
                        <td style="width: 60%">
                            <SfNumericTextBox @ref="@SpringFactor" ID="SpringFactor" TValue="double" Format="###.##" Step="0.1" Value="0.8">
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:10%;padding-top:10px"> </td>
                        <td style="width:10%;padding-top:10px"> </td>
                    </tr>
                    <tr>
                        <td style="width:30%;">Maximum Iteration</td>
                        <td style="width: 60%">
                            <SfNumericTextBox @ref="@MaximumIteration" ID="MaximumIteration" TValue="int" Format="###.##" Step="1" Value="500">
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:10%;padding-top:10px"> </td>
                        <td style="width:10%;padding-top:10px"> </td>
                    </tr>
                    <tr>
                        <td style="width: 50%"></td>
                        <td style="width: 50%; padding-top:10px">
                            <SfButton ID="refresh" @onclick="RefeshLayout" Content="Refresh"></SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@*End:Hidden*@
@code{
    SfNumericTextBox<int> SpringLength;
    SfNumericTextBox<double> SpringFactor;
    SfNumericTextBox<int> MaximumIteration;
    public Type model = typeof(Node);
    public int? HValue { get; set; } = 30;
    public int? VValue { get; set; } = 30;
    static string selecteditem = "image-pattern-style e-selected-style";
    static string unselecteditem = "image-pattern-style";

    public void RefeshLayout(MouseEventArgs args)
    {
        LayoutValue = new DiagramLayout()
        {
            Type = LayoutType.SymmetricalLayout,
            SpringLength = SpringLength.Value,
            SpringFactor = SpringFactor.Value,
            MaxIteration = MaximumIteration.Value,
            Margin = new LayoutMargin() { Left = 20, Top = 20 }
        };
    }
    Dictionary<string, string> dict = new Dictionary<string, string>() { { "topToBottom", selecteditem }, { "bottomToTop", unselecteditem }, { "leftToRight", unselecteditem }, { "rightToLeft", unselecteditem } };
    TreeInfo LayoutInfo = new TreeInfo()
    {
        CanEnableSubTree = true,
        Orientation = SubTreeOrientation.Horizontal

    };
    DiagramLayout LayoutValue = new DiagramLayout()
    {
        Type = LayoutType.SymmetricalLayout,
        SpringLength = 80,
        SpringFactor = 0.8,
        MaxIteration = 500,
        Margin = new LayoutMargin() { Left = 20, Top = 20 }
    };

    public class Node
    {
        public string Id { get; set; }
        public SymmetricLayoutModel Data { get; set; }
    }

    DiagramConnector ConnectorDefault = new DiagramConnector()
    {
        TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None },
        Type = Segments.Straight,

    };

    DiagramNode NodeDefaults = new DiagramNode
    {
        Width = 20,
        Height = 20,
        Style = new NodeShapeStyle() { Fill = "orange", StrokeWidth = 2 },
        Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>()
{
            new DiagramNodeAnnotation()
            {
                Content ="",
                AnnotationType=AnnotationType.Template
            }
        }
    };


    public class SymmetricLayoutModel
    {
        public string Id { get; set; }
        public string Source { get; set; }
        public string Type { get; set; }
        public string Parent { get; set; }
        public string Shape { get; set; }
    }
    public List<SymmetricLayoutModel> DataSource = new List<SymmetricLayoutModel>()
{
      new SymmetricLayoutModel(){ Id = "parent",Type = "server", Shape = "HTML"},
      new SymmetricLayoutModel(){ Id = "1",Source = "parent" ,Type = "server", Shape = "HTML"},
      new SymmetricLayoutModel(){ Id = "2",Source = "parent" ,Type = "server", Shape = "HTML"},
      new SymmetricLayoutModel(){ Id = "3",Source = "parent" ,Type = "server", Shape = "HTML"},
      new SymmetricLayoutModel(){ Id = "4",Source = "parent" ,Type = "server", Shape = "HTML"},
      new SymmetricLayoutModel(){ Id = "5",Source = "parent" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "6",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "7",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "8",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "9",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "10",Source = "1" ,Type = "Hub", Shape = "Basic"},
       new SymmetricLayoutModel(){ Id = "11",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "12",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "13",Source = "1" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "14",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "15",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "16",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "17",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "18",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "19",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "20",Source = "2" ,Type = "Hub", Shape = "Basic"},
       new SymmetricLayoutModel(){ Id = "21",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "22",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "23",Source = "2" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "24",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "25",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "26",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "27",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "28",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "29",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "30",Source = "3" ,Type = "Hub", Shape = "Basic"},
       new SymmetricLayoutModel(){ Id = "31",Source = "3" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "32",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "33",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "34",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "35",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "36",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "37",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "38",Source = "4" ,Type = "Hub", Shape = "Basic"},
      new SymmetricLayoutModel(){ Id = "39",Source = "4" ,Type = "Hub", Shape = "Basic"}
    };
    protected override void OnInitialized()
    {

    }
}


